<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>系统提示</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
body {

            font-family: "Microsoft YaHei", sans-serif;
            background-image: url('images/1.jpg');
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            background-color: #e0f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }


        /* 模态框样式 */
        .modal{
<!--            width: 350px;-->
background-color: rgba(255, 255, 255, 0.85);
            display: flex;
            margin-top: 280px;

            align-items: center;
            justify-content: center;
        }
        .modal-dialog{
        width: 360px;
        }
        .modal-title {
            width: 120%;
            text-align: center;
            font-size: 23px;
        }
        .modal-content {
            text-align: center;
            font-size: 18px;
        }
.button-container {
            display: flex;
            justify-content: center;
            margin-top: 25px;
        }

        .return-button, .exit-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #3498db;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            margin-right: 8px;
        }

    </style>
</head>

<body>


<!-- Modal 模态框，用于显示错误信息 -->
    <div class="modal" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="errorModalLabel">数据上传错误</h5>
<!--                    <button type="button" class="btn-close"  data-bs-dismiss="modal" aria-label="Close" href="/upload"></button>-->
                </div>
                <div class="modal-body">
                    <p id="errorMessage"></p>
                                <div class="button-container">
                <a href="/upload" class="return-button">Back</a>
            </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- 注册页面 JavaScript 代码 -->
    <script>
        {% if error %}
            // 显示登录失败的错误信息
            document.getElementById('errorMessage').innerText = "{{ error }}";
            // 显示 Modal 模态框
            var myModal = new bootstrap.Modal(document.getElementById('errorModal'));
            myModal.show();
        {% endif %}
    </script>
</body>

</html>